'use client'

import { Row, Col, Input, Select } from 'antd'
import { SearchOutlined } from '@ant-design/icons'

const { Search } = Input
const { Option } = Select

// 产品类型常量
const PRODUCT_TYPES = {
    WEBSITE: 'website',
    APP: 'app'
}

export default function ProductSearchFilter({
    searchTerm,
    onSearchChange,
    filterType,
    onFilterChange,
    sortBy,
    onSortChange,
    resultCount,
    searchPlaceholder = "搜索产品名称或描述..."
}) {
    return (
        <div className="mb-8">
            <Row align="middle" gutter={8} wrap={false}>
                {/* 搜索框：尽可能长 */}
                <Col flex="1 1 auto">
                    <Search
                        placeholder={searchPlaceholder}
                        allowClear
                        size="large"
                        prefix={<SearchOutlined />}
                        value={searchTerm}
                        onChange={(e) => onSearchChange(e.target.value)}
                        style={{ height: 40 }}
                    />
                </Col>

                {/* 类型选择框 */}
                <Col flex="0 0 auto">
                    <Select
                        placeholder="选择产品类型"
                        size="large"
                        value={filterType}
                        onChange={onFilterChange}
                        style={{ height: 40, minWidth: 90 }}
                    >
                        <Option value="all">全部类型</Option>
                        <Option value={PRODUCT_TYPES.WEBSITE}>网站</Option>
                        <Option value={PRODUCT_TYPES.APP}>应用</Option>
                    </Select>
                </Col>

                {/* 排序选择框 */}
                <Col flex="0 0 auto">
                    <Select
                        placeholder="排序方式"
                        size="large"
                        value={sortBy}
                        onChange={onSortChange}
                        style={{ height: 40, minWidth: 100 }}
                    >
                        <Option value="created_at">最新</Option>
                        <Option value="view_count">最热</Option>
                    </Select>
                </Col>
            </Row>

            {/* 统计文字另放一行，右对齐 */}
            <div className="text-right mt-2 text-gray-500">
                共找到 {resultCount} 个产品
            </div>
        </div>
    )
}